<template>
  <div class="box">
    <div class="header">
      <div>
        <uni-icons type="left"
                   size="20"></uni-icons>
      </div>
      <div class="header_title">登陆</div>
      <div></div>
    </div>
    <div class="main">
      <div class="main_top">
        <div class="user"><img class="user_img"
               src="http://rco8i11co.hn-bkt.clouddn.com/login_user.png"
               alt="">
        </div>
        <div class="user"
             v-if="a == 1 || a == 0">
          <div class="user_title"
               :class="[a == 0 ? ' user_title_hover' : ' ']"
               @click="a = 0">手机号登陆</div>
          <div class="user_title"
               :class="[a == 1 ? ' user_title_hover' : ' ']"
               @click="a = 1">密码登录</div>
        </div>
      </div>
      <div v-if="a == 0"
           class="man_cont">
        <div class="form_input"><input type="text"
                 class="input"
                 style="width: 100%;"
                 placeholder="请输入手机号" /></div>
        <div class="form_input">
          <input type="text"
                 class="input"
                 placeholder="请输入验证码"
                 style="width: 70%;" />
          <span style="float: right;color: blue;">获取验证码</span>
        </div>
      </div>
      <div v-if="a == 1"
           class="man_cont">
        <div class="form_input"><input type="text"
                 class="input"
                 style="width: 100%;"
                 placeholder="请输入手机号" /></div>
        <div class="form_input">
          <input type="text"
                 class="input"
                 placeholder="请输入密码"
                 style="width: 70%;"
                 v-model="form1" />
          <span style="float: right;color: blue;"
                @click="a = 2">忘记密码？</span>
        </div>
      </div>
      <div v-if="a == 2"
           class="man_cont">
        <div class="form_input"><input type="text"
                 class="input"
                 style="width: 100%;"
                 placeholder="请输入手机号" /></div>
        <div class="form_input">
          <input type="text"
                 class="input"
                 placeholder="请输入验证码"
                 style="width: 70%;" />
          <span style="float: right;color: blue;">获取验证码</span>
        </div>
        <div class="form_input"><input type="text"
                 class="input"
                 style="width: 100%;"
                 placeholder="请输入密码" /></div>
        <div class="form_input"><input type="text"
                 class="input"
                 style="width: 100%;"
                 placeholder="请再次输入密码" /></div>
        <div><button @click="submit"
                  class="dl">完成</button></div>
      </div>
      <div class="btn"
           v-if="a == 1 || a == 0">
        <div><button @click="submit"
                  class="dl">立即登陆</button></div>
        <br />
        <div>
          <label>
            <radio value="1"
                   style="font-size: 40rpx;" />
            <text>我已阅读并同意《用户协议》和《隐私政策》</text>
          </label>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      a: 0,

      width: 120,
      height: 45,
    }
  },
  methods: {
    submit() {
      uni.switchTab({
      	url: '/pages/shouye/shouye'
      });
    },
  },
}
</script>

<style lang="less">
.box {
  width: 100vw;
  height: 100vh;

  .header {
    padding: 5px 20rpx;
    line-height: 40rpx;
    height: 40rpx;
    display: flex;
    justify-content: space-between;

    .header_title {
      text-align: center;
    }
  }

  .main {
    margin-top: 40rpx;
    padding: 50rpx;
    height: 800rpx;
    line-height: 40rpx;
    display: flex;
    flex-wrap: wrap;

    .main_top {
      width: 100%;
      height: 400rpx;

      .user {
        height: 200rpx;
        width: 100%;
        padding: 0 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .user_img {
          background-size: cover;
          width: 200rpx;
          height: 200rpx;
          border-radius: 50%;
          border: 1px solid black;
        }

        .user_title {
          font-size: 30rpx;
          padding: 0 10rpx;
          width: 150rpx;
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
          color: gainsboro;
        }

        .user_title_hover {
          font-size: 30rpx;
          width: 150rpx;
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
          border-bottom: 2px solid red;
          color: black;
        }
      }
    }

    .man_cont {
      padding-top: 100rpx;
      width: 100%;
      height: 370rpx;
      align-items: center;
      justify-items: center;
      padding: 0 40rpx;
      .form_input {
        margin-top: 50rpx;
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 20rpx;
        align-items: center;

        .input {
          border-bottom: 1px solid gainsboro;
          display: inline-block;
        }
      }
    }
    .btn {
      margin-top: 100rpx;
      width: 100%;
      height: 170rpx;
      align-items: center;
      justify-items: center;
      font-size: 20rpx;
      text-align: center;
      .dl {
        border-radius: 25rpx;
        background-color: darkred;
        border: none;
        color: white;
        text-align: center;
        width: 70%;
        line-height: 70rpx;
        height: 70rpx;
        font-size: 20rpx;
      }
    }
    
  }
}
</style>
